<template>
  <div class="area">
    <v-row>
      <v-col cols="8" offset="1">
        <v-card flat>
          <v-card-subtitle class="padding-5px" style="overflow: visible">
            <v-row>
              <v-col cols="1">
                <v-avatar
                  :tile="tile"
                  :size="size"
                >
                  <img
                    :src="blog.avatar"
                    :alt="blog.author"
                  >
                </v-avatar>
              </v-col>
              <v-col cols="11" class="aligin-left" style="padding-left: 12px">
                <v-row>
                  <v-col class="padding-5px">
                    <p class="font-weight-black author">{{ blog.author }}</p>
                  </v-col>
                </v-row>
                <v-row>
                  <v-col class="padding-5px" cols="4">
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <span class="font-weight-medium" v-on="on">
                          {{ blog.updateTime | dateformatZh }}
                        </span>
                      </template>
                      <span>最后修改日期</span>
                    </v-tooltip>
                  </v-col>
                  <v-col class="padding-5px" cols="4">
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <span class="noPadding subtitle-2" style="color: #4fc3f7" v-on="on">
                          {{ blog.blogType }}
                        </span>
                      </template>
                      <span>分类</span>
                    </v-tooltip>
                  </v-col>
                  <v-col class="padding-5px" cols="4">
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <span class="noPadding overline" style="color: #8bc34a" v-on="on">评论
                          {{ blog.commentNum }}
                        </span>
                      </template>
                      <span>评论数量</span>
                    </v-tooltip>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-card-subtitle>
          <v-divider />
          <v-card-title class="display-1">
            {{ blog.title }}
          </v-card-title>
          <v-card-text>
            <mavon-editor
              v-model="blog.blogContent"
              class="nocoverage"
              :toolbars="markdownOption"
              :box-shadow="false"
              :scroll-style="true"
              :subfield="false"
              :transition="false"
              default-open="preview"
            />
          </v-card-text>
          <v-card-actions>
            <Comments :blog-id="blog.id" />
          </v-card-actions>
        </v-card>
      </v-col>

      <v-col cols="3">
        <v-row class="mt-12 fixRecommended">
          <v-card class="ml-2 mr-2" width="100%">
            <v-card-title class="recommended subtitle-1">
              推荐文章
            </v-card-title>
            <v-card-text v-if="recommendedList.length>0">
              <ul class="rec-ul">
                <li v-for="blog in recommendedList" :key="blog.id" class="rec-li">
                  <div class="article-title" @click="chooseBlog(blog)">{{ blog.title }}</div>
                  <div class="read-num">评论： {{ blog.commentNum }}</div>
                  <v-divider />
                </li>

              </ul>
            </v-card-text>
            <v-card-text v-else>
              暂无相关的推荐哦~
            </v-card-text>
          </v-card>

        </v-row>

      </v-col>
    </v-row>

  </div>
</template>

<script>
import '@/assets/css/business/blog/detail/detail.scss'
import Comments from './comment/Comments'
import { getRecommendedArticle } from '@/api/blog'

export default {
  name: 'blogDetail',
  components: {
    Comments
    // MarkNav,
  },
  data: () => ({
    tile: false,
    size: 60,
    blog: '', // 博客对象
    markdownOption: {
      bold: false, // 粗体
      italic: false, // 斜体
      header: false, // 标题
      underline: false, // 下划线
      strikethrough: false, // 中划线
      mark: false, // 标记
      superscript: false, // 上角标
      subscript: false, // 下角标
      quote: false, // 引用
      ol: false, // 有序列表
      ul: false, // 无序列表
      link: false, // 链接
      imagelink: false, // 图片链接
      code: false, // code
      table: false, // 表格
      fullscreen: false, // 全屏编辑
      readmodel: true, // 沉浸式阅读
      htmlcode: false, // 展示html源码
      help: false, // 帮助
      /* 1.3.5 */
      undo: false, // 上一步
      redo: false, // 下一步
      trash: false, // 清空
      save: false, // 保存（触发events中的save事件）
      /* 1.4.2 */
      navigation: true, // 导航目录
      /* 2.1.8 */
      alignleft: false, // 左对齐
      aligncenter: false, // 居中
      alignright: false, // 右对齐
      /* 2.2.1 */
      subfield: false, // 单双栏模式
      preview: false // 预览
    },
    content: '',
    recommendedList: []
  }),
  created() {
    this.blog = JSON.parse(this.$store.getters.blogDetail)
    // console.table(this.$store.getters.blogDetail);
    // 取完就清空
    this.$store.commit('clearBlogDetail')
    this.content = this.blog.blogContent
    this.getRecommendedArticle()
  },
  methods: {
    getRecommendedArticle() {
      const params = {
        id: this.blog.id,
        blogType: this.blog.blogTypeValue
      }
      getRecommendedArticle(params)
        .then((res) => this.getRecommendedSuccess(res))
        .catch(err => this.getRecommendedFailed(err))
        .finally(() => {
          // console.log("获取推荐博客完成......");
        })
    },
    getRecommendedSuccess(res) {
      const resultData = res.data
      if (res && res.code === 200) {
        this.recommendedList = []
        this.recommendedList.push(...resultData)
      }
    },
    getRecommendedFailed(err) {
      // console.error("获取推荐博客列表失败", err);
    },
    // 选择另一篇博客
    chooseBlog(blog) {
      this.$store.commit('setBlogDetail', JSON.stringify(blog))
      this.$parent.enterNewDetail(blog)
    }

  }
}
</script>
